<template>
  <div class="origin">
    <div class="headers">
      <img src="../assets/change.png" alt="" />
      <van-search
        v-model="value"
        shape="round"
        background="#7c3aed"
        placeholder="请输入搜索关键词"
        style="height: auto; margin-top: 0.5rem; margin-bottom: 0.5rem"
        @update:model-value="onSearchchange"
        @focus="onSearch"
        @blur="closesearch"
      />
      <van-icon name="apps-o" size="2rem" color="white" @click="logoout" />
      <van-popover
        class="popovers"
        v-model:show="showPopoversearch"
        :actions="searchdata.searchlist"
        @select="onSelect"
      >
      </van-popover>

      <div class="logooutsty">
        <div @click="logooutuser">登出</div>
        <div @click="friendlink">友情链接</div>
      </div>
    </div>
    <div>
      <van-tabs v-model:active="activeName">
        <van-tab title="文章" name="yaowen"></van-tab>
        <yaowen v-if="activeName == 'yaowen'" :title="activeName"></yaowen>
        <van-tab title="AI" name="registerdetails"></van-tab>
        <registerdetails
          v-if="activeName == 'registerdetails'"
          :title="activeName"
        ></registerdetails>

        <van-tab title="评论" name="recommen"></van-tab>
        <recommen
          v-if="activeName == 'recommen'"
          :title="activeName"
        ></recommen>
        <van-tab title="原创" name="original"></van-tab>
        <original
          v-if="activeName == 'original'"
          :title="activeName"
        ></original>
        <van-tab title="我的" name="hot"></van-tab>
        <hot v-if="activeName == 'hot'" :title="activeName"></hot>
      </van-tabs>
      <van-back-top :offset="90" />
    </div>
    <!-- <div class="mus">我是首页哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈类容</div> -->
    <!-- 底部tablebar -->
  </div>
</template>


<script setup>
import { onMounted, ref, reactive } from "vue";
import yaowen from "../view/yaowen.vue";
import recommen from "../view/recommen.vue";
import original from "../view/original.vue";
import hot from "../view/hot.vue";
import { showConfirmDialog, showToast, showSuccessToast } from "vant";
import registerdetails from "./commentDetails.vue";
import { useRouter } from "vue-router";
import { getsearchinfo } from "../api/getlogin";
components: {
  yaowen, recommen, original, hot, registerdetails;
}
const value = ref("");
const activeName = ref("a");
const router = useRouter();
const showPopoversearch = ref(false);
const searchdata = reactive({
  searchlist: [
    { text: "Vue的响应式原理", id: 2, icon: "fire-o", color: "#ee0a24" },
    { text: "面试官-Vue优化你怎么做", id: 1, icon: "fire-o", color: "#ee0a24" },
    { text: "JS的奇淫技巧", id: 5, icon: "fire-o", color: "#ee0a24" },
    { text: "Vue高频面试题", id: 4 },
    { text: "JS数组常用方法", id: 7 },
    { text: "2025年前端面试题", id: 3 },
    { text: "JS面试题", id: 6 },
    { text: "react-redux是什么", id: 8 },
    { text: "js闭包", id: 9 },
  ],
});
const show = ref(true);
const logoout = () => {
  if (show.value == false) {
    document.querySelector(".logooutsty").style.display = "none";
  }
  if (show.value == true) {
    document.querySelector(".logooutsty").style.display = "block";
    // show.value = !show.value;
  }
  show.value = !show.value;
  // setTimeout(() => {
  //   document.querySelector(".logooutsty").style.display = "none";
  // }, 2000);
};
const friendlink = () => {
  router.push({
    path: "/friendlink",
  });
  document.querySelector(".logooutsty").style.display = "none";
};
const logooutuser = () => {
  showConfirmDialog({
    title: "提示",
    message: "你确定要退出吗？",
  })
    .then(() => {
      document.querySelector(".logooutsty").style.display = "none";
      localStorage.removeItem("userinfo");
      router.push({
        path: "/home",
      });
      // on confirm
    })
    .catch(() => {
      showToast("取消退出！");
      document.querySelector(".logooutsty").style.display = "none";
    });
};
let debounceTimer;
const onSelect = (action) => {
  router.push({
    path: "/article",
    query: { id: action.id },
  });
};
const onSearch = () => {
  showPopoversearch.value = true;
  // router.push({
  //   path: "/search",
  // });
};
const closesearch = () => {
  showPopoversearch.value = false;
  // router.push({}
};
const onSearchchange = (value) => {
  clearTimeout(debounceTimer); // 清除之前的定时器
  debounceTimer = setTimeout(() => {
    getsearchinfo({ title: value }).then((res) => {
      console.log(res.data, "mnmnmnmn");

      const list = res.data.map((item, index) => {
        if (index % 2 === 0) {
          // 偶数索引，保留 text 键，删除其他键（如果需要）
          return { text: item.text };
        } else {
          // 奇数索引，保留 id 键，删除其他键（如果需要）
          return { text: item.id };
        }
        console.log(list, "list");
      });
      searchdata.searchlist = res.data;
    });
  }, 1000);
};

onMounted(async () => {});
</script>
 


<style scoped>
.headers {
  width: 100%;
  height: 4.2rem;
  background-color: #7c3aed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
/* .popovers {
  position: absolute;
  top: 150px;
  left: 10px;
} */
::v-deep .van-popover__content {
  position: absolute;
  top: 10px;
  left: -379px;
  width: 100vw;
  white-space: nowrap;
}

.headers img {
  height: 4rem;
  width: 4rem;
}

.headers ::v-deep .van-icon {
  height: auto;
  width: 3rem;
  position: relative;
}
.logooutsty {
  display: none;
  background: #ffffff;
  position: absolute;
  top: 26px;
  left: 236px;
  z-index: 99;
  width: 10rem;
  height: 6rem;
  div {
    border: 1px solid #eff2f5;
    height: 3rem;
  }
}
</style>